<template>
  <section class="my-checkin">
    <div class="top- flex-col flex-center flex-middle">
      <div class="display flex-col flex-center flex-middle">
        <p class="text1">签到所得积分</p>
        <div class="text2">+{{info.pointTotal}}</div>
        <div class="text1">连续签到{{info.continueDays}}天</div>
      </div>
      <button @click="signIn">立即签到</button>
    </div>
    <div class="time">
      当前时间：{{currentDate}}
    </div>
    <Calendar
      :months="months"
      @next="next"
      @prev="prev"
      :events="events"
      clean
      @select="select"
      ref="calendar"
      @selectMonth="selectMonth"
      @selectYear="selectYear"
      :now="false"
      :tileContent="tileContent"
      :almanacs="almanacs"
    />
    <!-- <button @click="setToday">返回今日</button>
    <button @click="dateInfo">日期信息</button>
    <button @click="renderer">重新渲染年月日期</button>-->
  </section>
</template>
<script>
// 文档 https://github.com/Hzy0913/mpvue-calendar
import Calendar from "mpvue-calendar";
import "mpvue-calendar/src/style.css";
export default {
  components: {
    Calendar
  },
  data() {
    return {
      months: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ],
      tileContent: [
        // { date: "2019-09-01", className: "holiday", content: "签" },
        // { date: "2019-8-21", className: "holiday", content: "签" },
        // { date: "2019-8-22", className: "holiday", content: "签" },
        // { date: "2019-8-30", className: "holiday", content: "签" },
      ],
      info: '',
      currentDate:''
    };
  },
  onLoad() {
    this.getSignInList();
    this.currentDate = this.formatDate(+new Date(),"Y-M-D")
  },
  methods: {
    routerTo(url) {
      wx.navigateTo({ url });
    },
    prev(year, month, weekIndex) {
      // console.log(year, month, weekIndex);
    },
    next(year, month, weekIndex) {
      // console.log(year, month, weekIndex);
    },
    selectYear(year) {
      // console.log(year);
    },
    selectMonth(month, year) {
      // console.log(year, month);
    },
    setToday() {
      this.$refs.calendar.setToday();
    },
    dateInfo() {
      const info = this.$refs.calendar.dateInfo(2018, 8, 23);
      // console.log(info);
    },
    renderer() {
      this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份
    },
    select(val, val2) {
      console.log(val);
      console.log(val2);
    },
    //签到列表
    getSignInList(){
      this.$api.getSignInList({signTime: this.formatDate(+new Date(),"Y-M-D")}).then(res => {
        this.info = res.data;
        var tile=[];
        res.data.calendarDates.map(item => {
          let obj={};
          if(item.sginIn){
            obj.date = item.date.replace(/\-0/g,'-');
            obj.className= "holiday";
            obj.content= "签";
            tile.push(obj);
          }
          return tile;
        })
        this.tileContent = tile;
      })
    },
    // 签到
    signIn(){
      var _this = this;
      this.$api.signIn({signTime: this.formatDate(+new Date(),"Y-M-D")}).then(response => {
        if(response.code == 0){
          _this.getSignInList();
          wx.showToast({
            title: res.msg, //提示的内容,
            icon: 'none', //图标,
            duration: 2000, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {

            }
          });
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.my-checkin {
  .top- {
    width: 375px;
    height: 250px;
    background: linear-gradient(
      90deg,
      rgba(35, 176, 255, 1) 0%,
      rgba(96, 198, 255, 1) 100%
    );
    .display {
      width: 150px;
      height: 150px;
      border: 3px solid rgba(0, 163, 255, 1);
      background: radial-gradient(
        circle,
        rgba(232, 249, 255, 0.9) 0%,
        rgba(232, 249, 255, 0.95) 53%,
        rgba(255, 255, 255, 1) 100%
      );
      border-radius: 50%;
    }
    button {
      width: 130px;
      height: 40px;
      background: linear-gradient(
        0deg,
        rgba(253, 230, 66, 1),
        rgba(254, 252, 166, 1)
      );
      box-shadow: 0px 2px 4px 0px rgba(0, 255, 163, 0.35);
      border-radius: 20px;
      padding: 0;
      margin: 0;
      line-height: 40px;
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(41, 178, 255, 1);
      margin-top:20px;
    }
    .text1 {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(41, 178, 255, 1);
      line-height: 13px;
    }
    .text2 {
      font-size: 30px;
      font-family: DIN;
      font-weight: 500;
      color: rgba(41, 178, 255, 1);
      margin: 23px 0;
    }
  }
  .time {
    font-size: 14px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(193, 196, 201, 1);
    line-height: 13px;
    padding: 15px;
    border-bottom: 10px solid #f7f7f7;
  }
}
</style>
<style lang="scss">
.my-checkin {
  .mc-body .mc-today-element .calendar-date {
    background-color: #3bb8fd;
    font-size: 15px;
    font-family: DIN;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    border-radius: 100%;
  }
  .holiday{
    background: url('') center no-repeat;
    background-size: 26px;
    color:white;
  }
}
</style>